<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="3"
      align-center
      style="margin-bottom: 80px"
      process-status="wait"
    >
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="发布课程"></el-step>
    </el-steps>
    <div class="info">
      <img :src="coursePublishInfo.cover" :alt="coursePublishInfo.title" />
      <div class="main">
        <h2>{{ coursePublishInfo.title }}</h2>
        <p>共{{ coursePublishInfo.lessonNum }}课时</p>
        <p>
          所属分类：{{ coursePublishInfo.subjectParentTitle }}——
          {{ coursePublishInfo.subjectTitle }}
        </p>
        <p>课程讲师：{{ coursePublishInfo.teacherName }}</p>
        <h3>￥{{ coursePublishInfo.price }}</h3>
      </div>
    </div>

    <el-button type="default" @click="privious()">返回修改</el-button>

    <el-button type="primary" @click="publish()">发布课程</el-button>
  </div>
</template>
<script>
import courseApi from "@/api/course";
export default {
  data() {
    return {
      couresId: "",
      coursePublishInfo: {}, //课程发布信息
    };
  },
  created() {
    this.init(); //初始化页面信息
  },
  methods: {
    // 返回修改
    privious() {
      this.$router.push({ path: `/course/chapter/${this.courseId}` });
    },
    // 发布课程
    publish() {
      courseApi.publishCourse(this.couresId).then((res) => {
        this.$message({
          type: "success",
          message: "发布成功!",
        });
        this.$router.push({ path: "/course/list" });
      });
      // 发布完成后跳转到列表页面
    },
    // 加载课程发布信息
    init() {
      if (this.$route.params && this.$route.params.id) {
        // 执行更新操作
        // 根据课程id获取当前更新课程信息
        this.couresId = this.$route.params.id;
        console.log(this.couresId);
        courseApi.getPublishInfoById(this.couresId).then((res) => {
          console.log(res);
          this.coursePublishInfo = res.data;
        });
      }
    },
  },
};
</script>
<style scoped>
.info {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px dotted #ddd;
  display: flex;
  margin-bottom: 30px;
}
.info img {
  width: 500px;
}
.info .main {
  margin-left: 30px;
}
.info .main h2 {
  font-weight: 400;
}
.info .main p {
  line-height: 28px;
}
.info .main h3 {
  font-weight: 400;
  color: #ca2c1c;
  font-size: 27px;
}
</style>